<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加删除记录</title>
</head>

<body>

    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">

        <h4>添加新员工</h4>

        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>

    </div>

</body>
<script>
    function delA() {
        //    console.log('this',this)
        var tr = this.parentNode.parentNode
        // 获取当前删除的员工的姓名
        var name = tr.children[0].innerHTML
        // 删除之前弹窗
        var flag = confirm(`确认删除${name}吗?`)
        // 点击确认
        if (flag) {
            // 找到当前的父节点并删除该子节点
            tr.parentNode.removeChild(tr)
        }
        // 点击超链接之后会跳转页面,取消默认行为
        return false
    }
    window.onload = function () {
        // 点击超链接之后,删除一个员工的信息
        var allA = document.getElementsByTagName('a')
        for (let item of allA) {
            item.onclick = delA
        }

        // 添加员工
        var addEmpButton = document.getElementById('addEmpButton')
        addEmpButton.onclick = function () {
            var name = document.getElementById('empName').value
            var email = document.getElementById('email').value
            var salary = document.getElementById('salary').value

            // 创建一个tr
            var tr = document.createElement('tr')
            // 设置tr中的内容
            tr.innerHTML = `
            <td>${name}</td>
            <td>${email}</td>
            <td>${salary}</td>
            <td><a href='javascript:;'>Delete</a></td>
            `
            // 获取刚才添加的a元素，并为其绑定单击响应函数
            var a = tr.getElementsByTagName("a")[0]
            a.onclick = delA
            var employeeTable = document.getElementById('employeeTable')
            var tbody = document.getElementsByTagName('tbody')[0]
            tbody.appendChild(tr)



        }
    }
</script>

</html>